<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>农教</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link href="../css/app.css" rel="stylesheet" />
		<link href="../css/index.css" rel="stylesheet" />
	</head>

	<body v-cloak>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		<div class="mui-content" id="vueModel">
			<div id="tabbar" class="mui-control-content mui-active">
				<div id="slider" class="mui-slider" v-if='sliderimgs&&sliderimgs.length>0'>
					<div class="mui-slider-group mui-slider-loop">
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img :src="sliderimgs[sliderimgs.length-1]">
							</a>
						</div>
						<div class="mui-slider-item" v-for="img in sliderimgs">
							<a href="#">
								<img :src="img">
							</a>
						</div>
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img :src="sliderimgs[0]">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div :class="['mui-indicator', i==0?'mui-active':'']" v-for="(img,i) in sliderimgs"></div>
					</div>
				</div>
				<ul class="mui-table-view" v-if='list&&list.length>0'>
					<li class="mui-table-view-cell mui-media" v-for="item in list" @tap="itemTap">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" :src="item.img">
							<div class="mui-media-body">
								<em v-html="item.title"></em>
								<p class="mui-ellipsis"><em v-text='item.author'></em><em v-text='item.grade'></em></p>
								<p class="mui-ellipsis"><em v-text='item.updated_at'></em><em class="mui-icon-extra mui-icon-extra-comment" v-text='item.comcnt'></em><em class="mui-icon-extra mui-icon-extra-like" v-text='item.likecnt'></em></p>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div id="tabbar-with-map" class="mui-control-content">
				<div class="user_login">
					<a class="has_login" href="javascript:void(0);" id="btnUserInfo">
						<div class="mui-card">
							<img class="bk" src="../img/inch47@2x.png" />
							<canvas id="canvasImg" class="canv-img"></canvas>
							<div class="mui-card-content">
								<label class="img-head-label">
									<img id="imgUserHead" class="img-head" data-field="head" src="../img/user_default_head.png" />
									<span class="mui-spinner"></span>
								</label>
								<label class="l-un"><span data-field="nick"></span></label>
								<label class="l-id"><span data-field="id"></span></label>
							</div>
						</div>
					</a>
					<a class="has_no_login" href="javascript:void(0);">
						<div class="mui-card">
							<img id="imgUserHeadDefault" src="../img/inch47@2x.png" class="blur-bk" />
							<div class="mui-card-content">
								<button id="btnLogin" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">登录</button>
							</div>
						</div>
					</a>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							消息中心
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							我的收藏
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							设置
						</a>
					</li>
				</ul>
				<ul class="mui-table-view" style="margin-top: 25px;">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							关于农教
						</a>
					</li>
				</ul>
				<ul class="mui-table-view" style="margin-top: 25px;">
					<li class="mui-table-view-cell">
						<a style="text-align: center;color: #FF3B30;">
							退出登录
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="../js/mui.js"></script>
	<script src="../js/vue/vue.min.js"></script>
	<script src="../js/seajs/sea.js"></script>
	<script>
		(function(mui) {
			var modelUrl = ['../js/index','../js/libs/com'];
			seajs.use(modelUrl, function(model,com) {
				model.init([mui,com]);
			});
		})(mui);
	</script>

</html>